<template>
  <div class="activity-detail-container">
    <div class="activity-content">
      <div class="activity-illustration">
        <img src="@/assets/images/activeImg.png" alt="全球合作插图" />
        <span>线上活动</span>
      </div>
      <div class="right">
        <div class="title">农场劳动实践</div>
        <div class="info">
          一起来研究应对考试焦虑的办法一起来研究应对考试焦虑的办法一起来研究应对考试焦虑的办法一起来研究应对考试焦虑的办法一起来研究应对考试焦虑的办法究应对考试焦虑的办法一起来研究应对考试焦虑的办法一起来研究应对考试焦虑的办法一起来研究应...
        </div>
        <div class="line">
          <div class="info-row">
            <span class="info-label">联系方式：</span>
            <span class="info-value">13999847001</span>
          </div>

          <div class="info-row">
            <span class="info-label">报名方式：</span>
            <span class="info-value">线上报名</span>
          </div>

          <div class="info-row">
            <span class="info-label">适合学段：</span>
            <span class="info-value">小学</span>
          </div>
        </div>
        <div class="line">
          <div class="info-row">
            <span class="info-label">活动地点：</span>
            <span class="info-value">浙江省台州市椒江区</span>
          </div>

          <div class="info-row">
            <span class="info-label">活动时间：</span>
            <span class="info-value">2024.10.10 - 2025.10.10</span>
          </div>

          <div class="info-row">
            <span class="info-label">活动名额：</span>
            <span class="info-value">300人</span>
          </div>

          <div class="info-row">
            <span class="info-label">主办单位：</span>
            <span class="info-value">温岭市教育局</span>
          </div>
        </div>
      </div>
      <div class="num">
        <img src="@/assets/images/people.png" alt="" />
        <span>现报名人数：100人</span>
      </div>
    </div>
    <el-divider />
  </div>
</template>

<script setup>
// 可以在这里添加组件逻辑
// 例如：报名功能、数据获取等
</script>

<style lang="scss" scoped>
.activity-detail-container {
  position: relative;
  box-sizing: border-box;
  width: 1550px;
  height: 240px;
  padding: 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  color: #333333;
  cursor: pointer;
  &:hover {
    background-color: #e9f3ff;
  }
}
.activity-tag {
  padding: 4px 12px;
  margin-left: 20px;
  font-size: 14px;
  color: white;
  background-color: #409eff;
  border-radius: 4px;
}
.right {
  .title {
    margin-bottom: 11px;
    font-size: 18px;
    font-weight: 700;
    color: #1981ff;
  }
  .info {
    width: 952px;
    margin-bottom: 47px;
    font-size: 14px;
    color: #3963a6;
  }
  .line {
    display: flex;
    gap: 40px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #3963a6;
  }
}
.activity-content {
  display: flex;
  width: 1550px;
  .activity-illustration {
    position: relative;
    width: 240px;
    height: 200px;
    margin-right: 30px;
    overflow: hidden;
    border-radius: 20px;
    img {
      width: 100%;
      height: auto;
    }
    span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 80px;
      height: 36px;
      line-height: 36px;
      color: white;
      text-align: center;
      background-color: #486570;
      border-radius: 0 0 20px;
    }
  }
  .num {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    align-items: center;
    width: 150px;
    height: 28px;
    padding: 0 6px;
    font-size: 14px;
    color: #3680ff;
    background-color: #f5f9ff;
    border: 1px solid #99bfff;
  }
}
</style>
